LINE ミニアプリから Web API をコールする時にハマった話

Access to XMLHttpRequest at 'https://API Gateway のアドレス/register' from origin 'https://LINE ミニアプリを呼び出す CloudFront で割り振られたアドレス' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

export const handler = async (event) => {
    const response = {
        statusCode: 200,
        headers: {
            "Access-Control-Allow-Headers" : "Content-Type",
            "Access-Control-Allow-Origin": "https://www.example.com",
            "Access-Control-Allow-Methods": "OPTIONS,POST,GET"
        },
        body: JSON.stringify('Hello from Lambda!'),
    };
    return response;
};

import { ID_REGISTER_API_USE_CASE, initContainer } from "@/di-container/register-container";
import { RegisterApiUseCase, UnexpectedError } from "@/use-case/liff-app-use-case/use-case";
import { APIGatewayProxyResult, APIGatewayProxyEvent, Context } from "aws-lambda";

const resultOK: APIGatewayProxyResult = {
  statusCode: 200,
  headers: {
+   "Access-Control-Allow-Headers" : "Content-Type",
+   "Access-Control-Allow-Origin": `${process.env.DEF_CLOUD_FRONT_ORIGIN}`,
+   "Access-Control-Allow-Method": "OPTIONS,POST,GET",
  },
  body: JSON.stringify({}),
}

const resultError: APIGatewayProxyResult = {
  statusCode: 500,
  headers: {
+   "Access-Control-Allow-Headers" : "Content-Type",
+   "Access-Control-Allow-Origin": `${process.env.DEF_CLOUD_FRONT_ORIGIN}`,
+   "Access-Control-Allow-Method": "OPTIONS,POST,GET",
  },
  body: JSON.stringify({}),
}
    ：

        const responsePreRegister = await axios.post(`${import.meta.env.VITE_PREREGISTER_API_URL}`, {
          lineAccessToken, registeredSource: paramRegisteredSource
+       }, {
+         headers: {
+           "Content-Type": "application/x-www-form-urlencoded",
+         },
        });

  body: 'lineAccessToken=アクセストークンの文字&registeredSource=登録経路パラメータ',

    ：
import * as logs from "aws-cdk-lib/aws-logs";
+import dotenv from "dotenv";
    ：
export class LineBotTestStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

+   dotenv.config();
    // example resource
    ：
    const lambdaLiffApp = new lambdaNodejs.NodejsFunction(this, "LiffTest", {
      runtime: lambda.Runtime.NODEJS_20_X,
      entry: "../backend/src/handler/liff-app/handler-register.ts",
      role: roleLiffApp,
      timeout: cdk.Duration.seconds(120),
+     environment: {
+       "DEF_CLOUD_FRONT_ORIGIN": `${process.env.DEF_ORIGIN_LIFF_URL}`,
+     }
    });
    ：
    // API Gateway の POST イベントと Lambda との紐付け
    lineWebhook.addMethod("POST", lambdaIntegMemoBot);
    // Liff App 用
    const register = api.root.addResource("register", {
+     // CORS のプレフライトを自動受信する設定
+     defaultCorsPreflightOptions: {
+       allowOrigins: [`${process.env.DEF_ORIGIN_LIFF_URL}`],
+       allowMethods: apigateway.Cors.ALL_METHODS,
+       allowHeaders: apigateway.Cors.DEFAULT_HEADERS,
+       statusCode: 200,
+     },
    });
    register.addMethod("POST", lambdaIntegLiffApp);
    ：